<template>
	<view class="scroll-tab-packbox font-hanserif-bold">
		<view class="scroll-tabbox" v-if="list.length > 1">
			<view class="flex relative mx-auto tabbox-content">
				<view class="flex tabbox">
					<scroll-view v-if="list.length && isDiyTabBg" class="tabbox-info mx-auto" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="poScrollViewInto" :enable-flex="true">
						<view class="flex-justify-content-center">
							<view class="tabbox-list flex relative">
								<view
									class="tabbox-item"
									v-for="(tab, index) in list"
									:key="tab.id"
									:id="tab.id"
									:data-current="index"
									@click="navTabClickFun"
								>
									<view class="tabbox-item-txt text-nowrap relative flex flex-justify-content-center flex-align-items-center">
										<view
											class="item-detail relative flex flex-all-center"
											:class="[currentIndex === index ? 'item-active' : '']"
											:style="{
												width: tab.imgWidth,
												height: tab.imgHeight,
												minWidth: 'unset',
												maxWidth: 'unset',
											}"
										>
											<image :style="{ height: tab.imgHeight }" 
												mode="heightFix" 
												v-if="currentIndex === index" 
												:src="`${commonConfigs.domainFrontFileLink}${tab.tabBgImgActive || tab.tabBgImg}`" />
											<image :style="{ height: tab.imgHeight }" 
												mode="heightFix" 
												v-else 
												:src="`${commonConfigs.domainFrontFileLink}${tab.tabBgImg}`" />
											
											<view class="absolute flex-all-center" style="width: 100%;height: 100%;">{{ tab.text || tab.name }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					
					<scroll-view v-if="list.length && !isDiyTabBg" class="tabbox-info mx-auto" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="poScrollViewInto" :enable-flex="true">
						<view class="flex">
							<view class="tabbox-list flex relative">
								<view
									class="tabbox-item"
									v-for="(tab, index) in list"
									:key="tab.id"
									:id="tab.id"
									:data-current="index"
									@click="navTabClickFun"
								>
									<view class="tabbox-item-txt text-nowrap relative flex flex-justify-content-center flex-align-items-center">
										<view
											class="item-detail relative flex flex-all-center"
											:class="[currentIndex === index ? 'item-active' : '']"
										>
											<image style="height: 56rpx;" mode="heightFix" v-if="currentIndex === index" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/tabarea-item-active.png`" />
											<image style="height: 56rpx;" mode="heightFix" v-else :src="`${commonConfigs.domainFrontFileLink}/files/images/common/tabarea-item.png`" />
											
											<view class="absolute flex-all-center" style="width: 100%;height: 100%;">{{ tab.text || tab.name }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>

					<slot name="btns"></slot>
				</view>
			</view>
		</view>

		<view class="tabbar-box">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import { navTabFun } from '@/setupproject/TOOLS_FUN';

	export default {
		name: 'comScrollTab',
		props: {
			isDiyTabBg: {
			 	type: Boolean,
			 	default: () => false
			},
			isShow: {
				type: Boolean,
			},
			list: {
				type: Array,
				default: () => []
			},
			value: {
				type: Number,
				default: () => 0
			},
		},
		
		computed: {
			currentIndex: {
				get() {
					// #ifdef APP-VUE
					this.$emit('input', this.value)
					// #endif
					return this.value
				},
				set(v) {
					this.$emit('input', v)
				},
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		
		data() {
			const {
				tabAreaList,
				poScrollViewInto,
				navTabClickFun
			} = this.navTabFun(this.list);
			return {
				tabAreaList,
				poScrollViewInto,
				navTabClickFun,
			};
		},
		methods: {
			navTabFun
		}
	};
</script>

<style scoped lang="scss">
	.scroll-tab-packbox {
		.scroll-tabbox {
			position: sticky;
			top: 0px;
			
			.tabbox-content {
				width: 100%;
				padding-right: 20rpx;
				height: auto;
				.tabbox {
					width: 100%;
					overflow: hidden;
					
					.tabbox-info {
						top: 0;
						height: 80rpx;
					}
					
					.tabbox-list {
						height: 100%;
						width: auto;
						.tabbox-item {
							padding-right: 16rpx;
							
							.tabbox-item-txt {
								.item-detail {
									font-size: 28rpx;
									margin-left: 32rpx;
									text-align: center;
									min-width: 162rpx;
									max-width: 162rpx;
									color: #FFFFFF;
									&.item-active {
										color: #FFFFFF;
										font-size: 28rpx;
										font-weight: bold;
									}
								}
							}
						}
						
					}
					
				}
			}
			
		}
	}
</style>
